<!DOCTYPE html>
<html lang="zh">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui" />
  <meta name="keywords" content="LightYear,LightYearAdmin,光年,后台模板,后台管理系统,光年HTML模板" />
  <meta name="description" content="Light Year Admin V5是一个基于Bootstrap v5.1.3的后台管理系统的HTML模板。" />
  <title>拐点 - 光年(Light Year Admin V5)后台管理系统模板</title>
  <link rel="shortcut icon" type="image/x-icon" href="../favicon.ico" />
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="apple-touch-fullscreen" content="yes" />
  <meta name="apple-mobile-web-app-status-bar-style" content="default" />
  <link rel="stylesheet" type="text/css" href="../css/materialdesignicons.min.css" />
  <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css" />
  <link rel="stylesheet" type="text/css" href="../css/style.min.css" />
  <style>
    body {
      min-width: 740px;
    }

    ol,
    ul {
      margin: 0 !important;
    }

    [class*='btn'],
    input,
    textarea,
    select {
      outline: 0 !important;
      box-shadow: none !important;
      border-color: gray !important;
    }

    .inputQuery {
      margin-bottom: 0.5rem;
      display: flex;
      align-items: center;
    }

    .inputQuery>div {
      margin: 0px 8px 0px 8px;
      display: flex;
      align-items: center;
    }

    .inputQuery>div>input {
      margin-left: 8px;
    }

    input input,
    button {
      margin-left: 9px;
    }

    .functionButtons {
      display: flex;
      width: 100%;
      margin-bottom: 1rem;
      justify-content: flex-end;
    }

    table {
      width: 100%;
      border-collapse: collapse;
    }

    th,
    td {
      padding: 8px;
      text-align: left;
      /* border: 1px solid black; */
      white-space: nowrap;
      text-overflow: elipse;
    }

    .operate input {
      background-color: white;
      border: 0px;
      padding: 0;
    }

    /* 文本输入框的颜色 */
    /* input[type='text']::placeholder {
      color: black;
      
    } */

    .pointer:hover {
      cursor: pointer;
      color: #007bff;
    }

    .paging {
      display: flex;
      justify-content: center;
    }

    .queryCategory {
      position: relative;
      display: flex;
      flex-wrap: wrap;
      align-items: stretch;
      max-height: 35px;
      margin: 0px 8px 0px 8px;
    }
  </style>
</head>

<body>
  <div class="container-fluid" id="app">
    <div class="row">
      <div class="col-lg-12">
        <div class="card">
          <header class="card-header d-flex justify-content-between align-items-center">
            <!-- breadcrumb navigator start -->
            <nav id="nav-title" aria-label="breadcrumb">
              <ol class="breadcrumb">
                <li>当前位置：</li>
                <li class="breadcrumb-item">学生信息管理</li>
                <li class="breadcrumb-item active" aria-current="page">
                  基本学生信息
                </li>
              </ol>
            </nav>
            <!-- breadcrumb navigator end -->
            <a class="btn btn-outline-primary" data-bs-toggle="collapse" href="#collapseExample" role="button"
              aria-expanded="false" aria-controls="collapseExample" @click="toggle">
              {{unfoldOrfold}}查询栏
            </a>
          </header>
          <div class="card-body py-0">
            <!-- query-area card start -->
            <div id="query-area" class="card mb-3">
              <!-- query-area collapse start -->
              <div class="collapse show py-1" id="collapseExample">
                <!-- query-area card-body start -->
                <div class="card-body pt-1">
                  <span class="d-block m-2">范围查询</span>
                  <div class="row row-cols-3 row-cols-md-3 row-cols-lg-4 row-cols-xl-5">
                    <!-- <div class="d-flex col p-1"> -->
                    <div class="col mb-2">
                      <div class="input-group">
                        <label class="input-group-text" for="dateOfUpdate">
                          专修年级
                        </label>
                        <select name="" id="grade" class="form-select">
                          <option value="1">请选择</option>
                          <option value="2">21级</option>
                          <option value="3">22级</option>
                          <option value="4">23级</option>
                        </select>
                      </div>
                    </div>
                    <!-- <div class="d-flex col p-1"> -->
                    <div class="col mb-2">
                      <div class="input-group">
                        <label class="input-group-text" for="dateOfUpdate">
                          学籍专业
                        </label>
                        <select name="" id="major" class="form-select">
                          <option value="1">请选择</option>
                          <option value="2">新媒体</option>
                          <option value="3">软件工程</option>
                          <option value="4">物联网</option>
                        </select>
                      </div>
                    </div>
                    <!-- <div class="d-flex col p-1"> -->
                    <div class="col mb-2">
                      <div class="input-group">
                        <label class="input-group-text" for="dateOfUpdate">
                          分班
                        </label>
                        <select name="" id="class" class="form-select">
                          <option value="1">请选择</option>
                          <option value="2">1班</option>
                          <option value="3">2班</option>
                          <option value="4">3班</option>
                        </select>
                      </div>
                    </div>
                    <!-- <div class="d-flex col p-1"> -->
                    <div class="col mb-2">
                      <div class="input-group">
                        <label class="input-group-text" for="dateOfUpdate">
                          层次
                        </label>
                        <select name="" id="arrangement" class="form-select">
                          <option value="1">请选择</option>
                          <option value="2">高起本</option>
                        </select>
                      </div>
                    </div>
                    <!-- <div class="d-flex col p-1"> -->
                    <div class="col mb-2">
                      <div class="input-group">
                        <label class="input-group-text" for="dateOfUpdate">
                          报道季节
                        </label>
                        <select name="" id="report" class="form-select">
                          <option value="1">请选择</option>
                          <option value="2">春</option>
                          <option value="3">秋</option>
                        </select>
                      </div>
                    </div>
                    <!-- <div class="d-flex col p-1"> -->
                    <div class="col mb-2">
                      <div class="input-group">
                        <label class="input-group-text" for="dateOfUpdate">
                          在校情况
                        </label>
                        <select name="" id="atSchoolType" class="form-select">
                          <option value="1">请选择</option>
                          <option value="2">在校</option>
                          <option value="3">业余</option>
                          <option value="4">休学</option>
                          <option value="4">退学</option>
                        </select>
                      </div>
                    </div>
                    <!-- 异动和查询按钮部分开始 -->
                    <div class="col p-1 d-flex justify-content-end align-items-center">
                      <div>
                        <label for="myCheckbox">异动：</label>
                        <input type="checkbox" id="myCheckbox" class="form-check-input" />
                      </div>
                      <button class="btn btn-primary" type="button" @click="">
                        查询
                      </button>
                    </div>
                    <!-- 异动和查询按钮部分结束 -->
                  </div>
                  <span class="d-block m-2">内容查询</span>
                  <div class="rangeQuery">
                    <div class="inputQuery">
                      <div>
                        <label for="">专修编号</label>
                        <input type="radio" name="choice" value="majorNumber" class="form-check-input" />
                      </div>
                      <div>
                        <label for="">证件号</label>
                        <input type="radio" name="choice" value="idNumber" class="form-check-input" />
                      </div>
                      <div>
                        <label for="">学生姓名</label>
                        <input type="radio" name="choice" value="studentName" class="form-check-input" />
                      </div>
                      <div class="col-3">
                        <input type="text" name="textQuery" id="" class="form-control" />
                      </div>

                      <div class="h-100 d-flex align-items-center">
                        <label for="isFuzzy" class="mx-1">模糊查询</label>
                        <input type="checkbox" id="isFuzzy" class="form-check-input" v-model="fuzzy" />
                      </div>
                      <button class="btn btn-primary" type="button" @click="">
                        查询
                      </button>
                    </div>
                  </div>
                </div>
                <!-- query-area card-body end -->
              </div>
              <!-- query-area collapse end -->
            </div>
            <!-- query-area card end -->

            <div class="functionButtons">
              <div>
                <button class="btn btn-primary mb-2">导入</button>
                <button class="btn btn-primary mb-2">导出</button>
                <!--添加学生弹出模态框-->
                <button class="btn btn-primary mb-2" type="button" data-bs-toggle="modal"
                  data-bs-target="#addStudentModal">
                  添加学生
                </button>

                <!--变更在校弹出模态框-->
                <button class="btn btn-primary mb-2" type="button" data-bs-toggle="modal"
                  data-bs-target="#changeInSchoolModal">
                  变动在校
                </button>

                <!--变更专业弹出模态框-->
                <button class="btn btn-primary mb-2" type="button" data-bs-toggle="modal"
                  data-bs-target="#changeMajorModal">
                  变更专业
                </button>
              </div>
            </div>
            <div class="tableContent overflow-auto">
              <!-- table开始 -->
              <table class="table">
                <thead>
                  <tr>
                    <th scope="col">
                      <input type="checkbox" class="form-check-input" v-model="isAll" />
                    </th>
                    <th scope="col">序号</th>
                    <th scope="col">专修编号</th>
                    <!--点击学生编号或者姓名显示消息-->
                    <th scope="col">学生姓名</th>
                    <th scope="col">性别</th>
                    <th scope="col">证件号</th>
                    <th scope="col">层次</th>
                    <th scope="col">在校情况</th>
                    <!-- <th scope="col">专修年级</th> -->
                    <!-- <th scope="col">报道季节</th> -->
                    <th scope="col">专修专业</th>
                    <!-- <th scope="col">分班</th> -->
                    <!-- <th scope="col">班主任</th> -->
                    <th scope="col">学历组合</th>
                    <th scope="col">异动</th>
                    <th>操作</th>
                  </tr>
                </thead>
                <tbody>
                  <!-- html版 -->
                  <!-- <tr>
                      <td><input type="checkbox" id="myCheckbox" /></td>
                      <th scope="row">1</th>
                      <td>2135D101</td>
                      <td>小明</td>
                      <td>男</td>
                      <td>512356987454345</td>
                      <td>高起本</td>
                      <td>在校</td>
                      <td>2022</td>
                      <td>春</td>
                      <td>软件工程</td>
                      <td>1班</td>
                      <td>廖老师</td>
                      <td>国开专科+网教本科</td>
                      <td>有</td>
                      <td class="operate">
                        <input type="button" value="【修改】" />|
                        <input type="button" value="【变动在校】" />|
                        <input type="button" value="【变更专业】" />
                      </td>
                    </tr> -->

                  <!-- vue版 -->
                  <tr v-for="(item, index) in studentArr" :key="item.id">
                    <td>
                      <input class="form-check-input" type="checkbox" v-model="item.isChecked" />
                    </td>
                    <th scope="row">{{item.id}}</th>
                    <td class="pointer" data-bs-toggle="modal" data-bs-target="#showModal">
                      {{item.majorNumber}}
                    </td>
                    <td class="pointer" data-bs-toggle="modal" data-bs-target="#showModal">
                      {{item.name}}
                    </td>
                    <td>{{item.sex}}</td>
                    <td>{{item.idNumber}}</td>
                    <td>{{item.arrangement}}</td>
                    <td>{{item.atSchoolType}}</td>
                    <!-- <td>2022</td> -->
                    <!-- <td>春</td> -->
                    <td>{{item.major}}</td>
                    <!-- <td>1班</td> -->
                    <!-- <td>廖老师</td> -->
                    <td>{{item.educatCombination}}</td>
                    <td class="pointer" data-bs-toggle="modal" data-bs-target="#removeModal">
                      {{item.unusualAction}}
                    </td>
                    <td class="operate">
                      <input type="button" value=" 【修改】" data-bs-toggle="modal" data-bs-target="#updateModal" />|
                      <input type="button" value="【变动在校】" data-bs-toggle="modal"
                        data-bs-target="#changeInSchoolModal" />|
                      <input type="button" value="【变更专业】" data-bs-toggle="modal" data-bs-target="#changeMajorModal" />
                    </td>
                  </tr>
                </tbody>
              </table>
              <!-- table结束 -->
            </div>
          </div>
          <nav class="paging" aria-label="Page navigation">
            <ul class="pagination">
              <li class="page-item">
                <a class="page-link" href="#">上一页</a>
              </li>
              <!-- aria-current=“page”应该用于一组链接。单击链接不会导航到新页面，而只是更改表中可见的行。 -->
              <li class="page-item active" aria-current="page">
                <a class="page-link" href="#">1</a>
              </li>
              <li class="page-item"><a class="page-link" href="#">2</a></li>
              <li class="page-item"><a class="page-link" href="#">3</a></li>
              <li class="page-item"><a class="page-link" href="#">4</a></li>
              <li class="page-item"><a class="page-link" href="#">5</a></li>
              <li class="page-item">
                <a class="page-link" href="#">下一页</a>
              </li>
            </ul>
          </nav>
        </div>
      </div>
    </div>
  </div>

  <!-- 点击添加学生模态框 -->
  <div class="modal fade" id="addStudentModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
    aria-labelledby="staticBackdropLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg">
      <div class="modal-content">
        <!-- 标题 -->
        <div class="modal-header">
          <h1 class="modal-title fs-5" id="addStudentModal">添加学生</h1>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <!-- 模态框内容  三个为一组/排-->
        <div class="modal-body">
          <div class="row mb-3">
            <!-- 添加学生姓名 -->
            <div class="col">
              <div class="input-group">
                <label class="input-group-text" for="1">姓名</label>
                <input type="text" placeholder="请输入..." class="form-control" id="1" />
              </div>
            </div>
            <!-- 添加学生身份证号 -->
            <div class="col">
              <div class="input-group">
                <label class="input-group-text" for="2">身份证号</label>
                <input type="text" placeholder="请输入..." class="form-control" id="2" />
              </div>
            </div>
            <!-- 添加报道季节 -->
            <div class="col">
              <div class="input-group">
                <label class="input-group-text" for="3">报道季节</label>
                <select id="3" class="form-select" aria-describedby="basic-addon1">
                  <option value="" selected disabled>请选择...</option>
                  <option value="1">春</option>
                  <option value="2">秋</option>
                </select>
              </div>
            </div>
          </div>

          <div class="row mb-3">
            <!-- 添加性别 -->
            <div class="col">
              <div class="input-group">
                <label class="input-group-text" for="1">性别</label>
                <select id="1" class="form-select" aria-describedby="basic-addon1">
                  <option value="" selected disabled>请选择...</option>
                  <option value="1">男</option>
                  <option value="2">女</option>
                </select>
              </div>
            </div>
            <!-- 添加层次 -->
            <div class="col">
              <div class="input-group">
                <label class="input-group-text" for="2">层次</label>
                <select id="2" class="form-select" aria-describedby="basic-addon1">
                  <option value="" selected disabled>请选择...</option>
                  <option value="1">高起本</option>
                  <option value="2">专起本</option>
                </select>
              </div>
            </div>
            <!-- 添加在校情况 -->
            <div class="col">
              <div class="input-group">
                <label class="input-group-text" for="3">在校情况</label>
                <select id="3" class="form-select" aria-describedby="basic-addon1">
                  <option value="" selected disabled>请选择...</option>
                  <option value="1">在校</option>
                  <option value="2">业余</option>
                  <option value="3">休学</option>
                  <option value="4">退学</option>
                </select>
              </div>
            </div>
          </div>

          <div class="row mb-3">
            <!-- 添加年级 -->
            <div class="col">
              <div class="input-group">
                <label class="input-group-text" for="1">年级</label>
                <select id="1" class="form-select" aria-describedby="basic-addon1">
                  <option value="" selected disabled>请选择...</option>
                  <option value="2">21级</option>
                  <option value="3">22级</option>
                  <option value="4">23级</option>
                </select>
              </div>
            </div>
            <!-- 添加班级 -->
            <div class="col">
              <div class="input-group">
                <label class="input-group-text" for="2">分班</label>
                <select id="2" class="form-select" aria-describedby="basic-addon1">
                  <option value="" selected disabled>请选择...</option>
                  <option value="1">1班</option>
                  <option value="2">2班</option>
                  <option value="3">3班</option>
                </select>
              </div>
            </div>
            <!-- 添加专业 -->
            <div class="col">
              <div class="input-group">
                <label class="input-group-text" for="3">专修专业</label>
                <select id="3" class="form-select" aria-describedby="basic-addon1">
                  <option value="" selected disabled>请选择...</option>
                  <option value="1">新媒体</option>
                  <option value="2">软件工程</option>
                  <option value="3">物联网</option>
                </select>
              </div>
            </div>
          </div>
        </div>
        <!-- 模态框尾部--按钮 -->
        <div class="modal-footer">
          <button type="button" class="btn btn-primary" data-bs-dismiss="modal">
            确认
          </button>
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
            取消
          </button>
        </div>
      </div>
    </div>
  </div>

  <!--变更在校弹出模态框-->
  <div class="modal fade" id="changeInSchoolModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
    aria-labelledby="staticBackdropLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content">
        <div class="modal-header">
          <h1 class="modal-title fs-5" id="changeInSchoolModal">变动在校</h1>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <!-- 内容 -->
        <div class="modal-body">
          <div class="input-group mb-3">
            <span class="input-group-text" id="basic-addon1">在校情况</span>
            <select name="" id="major" class="input-group-text" aria-describedby="basic-addon1">
              <option value="" selected disabled>请选择...</option>
              <option value="1">在校</option>
              <option value="2">业余</option>
              <option value="3">休学</option>
              <option value="4">退学</option>
            </select>
          </div>
          <div class="input-group">
            <span class="input-group-text">变更理由</span>
            <textarea class="form-control" aria-label="带文本区域"></textarea>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-primary" data-bs-dismiss="modal">
            确认
          </button>
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
            取消
          </button>
        </div>
      </div>
    </div>
  </div>

  <!-- 变更专业弹出模态框 -->
  <div class="modal fade" id="changeMajorModal" data-bs-backdrop="static" data-keyboard="false" tabindex="-1"
    aria-labelledby="changeMajorModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content">
        <div class="modal-header">
          <h1 class="modal-title fs-5" id="changeMajorModal">变更专业</h1>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <div class="input-group mb-3">
            <span class="input-group-text" id="basic-addon1">专修专业</span>
            <select name="" id="major" class="input-group-text" aria-describedby="basic-addon1">
              <option value="" selected disabled>请选择...</option>
              <option value="1">新媒体</option>
              <option value="2">软件工程</option>
              <option value="3">物联网</option>
            </select>
          </div>

          <div class="input-group mb-3">
            <span class="input-group-text" id="basic-addon1">班级</span>
            <select name="" id="classes" class="input-group-text" aria-describedby="basic-addon1">
              <option value="-1">请选择班级...</option>
              <option value="1">1班</option>
              <option value="2">2班</option>
              <option value="3">3班</option>
            </select>
          </div>

          <div class="input-group">
            <span class="input-group-text">变更理由</span>
            <textarea class="form-control" aria-label="带文本区域"></textarea>
          </div>
        </div>

        <div class="modal-footer">
          <button type="button" class="btn btn-primary" data-bs-dismiss="modal">
            确认
          </button>
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
            取消
          </button>
        </div>
      </div>
    </div>
  </div>

  <!-- 修改学生信息弹出模态框 -->
  <div class="modal fade" id="updateModal" data-bs-backdrop="static" data-keyboard="false" tabindex="-1"
    aria-labelledby="updateModal" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg">
      <div class="modal-content">
        <div class="modal-header">
          <h1 class="modal-title fs-5" id="updateModal">修改学生信息</h1>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <div class="row mb-3">
            <div class="col">
              <div class="input-group">
                <!--专修编号不可更改-->
                <label class="input-group-text" for="1">专修编号</label>
                <input type="text" disabled="disabled" value="2193R111" class="form-control" id="1">
              </div>
            </div>
            <div class="col">
              <div class="input-group">
                <label class="input-group-text" for="1">姓名</label>
                <input type="text" placeholder="请输入..." class="form-control" id="1" />
              </div>
            </div>
            <div class="col">
              <div class="input-group">
                <label class="input-group-text" for="2">身份证号</label>
                <input type="text" placeholder="请输入..." class="form-control" id="2" />
              </div>
            </div>
          </div>

          <div class="row mb-3">
            <div class="col">
              <div class="input-group">
                <label class="input-group-text" for="3">报道季节</label>
                <select id="3" class="form-select" aria-describedby="basic-addon1">
                  <option value="" selected disabled>请选择...</option>
                  <option value="1">春</option>
                  <option value="2">秋</option>
                </select>
              </div>
            </div>
            <div class="col">
              <div class="input-group">
                <label class="input-group-text" for="1">性别</label>
                <select id="1" class="form-select" aria-describedby="basic-addon1">
                  <option value="" selected disabled>请选择...</option>
                  <option value="1">男</option>
                  <option value="2">女</option>
                </select>
              </div>
            </div>
            <div class="col">
              <div class="input-group">
                <label class="input-group-text" for="2">层次</label>
                <select id="2" class="form-select" aria-describedby="basic-addon1">
                  <option value="" selected disabled>请选择...</option>
                  <option value="1">高起本</option>
                  <option value="2">专起本</option>
                </select>
              </div>
            </div>
          </div>

          <div class="row mb-3">
            <div class="col">
              <div class="input-group">
                <label class="input-group-text" for="3">在校情况</label>
                <select id="3" class="form-select" aria-describedby="basic-addon1">
                  <option value="" selected disabled>请选择...</option>
                  <option value="1">在校</option>
                  <option value="2">业余</option>
                  <option value="3">休学</option>
                  <option value="4">退学</option>
                </select>
              </div>
            </div>
            <div class="col">
              <div class="input-group">
                <label class="input-group-text" for="1">年级</label>
                <select id="1" class="form-select" aria-describedby="basic-addon1">
                  <option value="" selected disabled>请选择...</option>
                  <option value="2">21级</option>
                  <option value="3">22级</option>
                  <option value="4">23级</option>
                </select>
              </div>
            </div>
            <div class="col">
              <div class="input-group">
                <label class="input-group-text" for="2">分班</label>
                <select id="2" class="form-select" aria-describedby="basic-addon1">
                  <option value="" selected disabled>请选择...</option>
                  <option value="1">1班</option>
                  <option value="2">2班</option>
                  <option value="3">3班</option>
                </select>
              </div>
            </div>
          </div>

          <div class="input-group mb-3">
            <span class="input-group-text" id="basic-addon1">专修专业</span>
            <select name="" id="major" class="form-select" aria-describedby="basic-addon1">
              <option value="" selected disabled>请选择...</option>
              <option value="1">新媒体</option>
              <option value="2">软件工程</option>
              <option value="3">物联网</option>
            </select>
          </div>

          <div class="input-group">
            <span class="input-group-text">变更理由</span>
            <textarea class="form-control" aria-label="带文本区域"></textarea>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-primary" data-bs-dismiss="modal">
              确认
            </button>
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
              取消
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- 点击专修编号或者姓名模态框 -->
  <div class="modal fade " id="showModal" data-bs-backdrop="static" data-keyboard="false" tabindex="-1"
    aria-labelledby="changeMajorModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg">
      <div class="modal-content">
        <div class="modal-header">
          <h1 class="modal-title fs-5" id="showModal">学生相关信息</h1>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <!-- 这里可以添加变更专业的表单或内容 -->
          <div class="row row-sm-2 row-cols-lg-3 mb-3">
            <div class="col-5 col-lg-3 mb-2">
              <div class="input-group flex-nowrap">
                <label class="input-group-text " for="1">专修编号</label>
                <input type="text" readonly value="2193R111" class="form-control" id="1">
              </div>
            </div>
            <div class="col-5 col-lg-3 mb-2">
              <div class="input-group">
                <label class="input-group-text" for="2">姓名</label>
                <input type="text" readonly value="Tom" class="form-control" id="2" />
              </div>
            </div>
            <div class="col-5 col-lg-3 mb-2">
              <div class="input-group">
                <label class="input-group-text" for="3">性别</label>
                <input type="text" readonly value="男" class="form-control" id="3" />
              </div>
            </div>
            <div class="col-5 col-lg-3 mb-2">
              <div class="input-group">
                <label class="input-group-text" for="4">学历层次</label>
                <input type="text" readonly value="高起本" class="form-control" id="4" />
              </div>
            </div>
            <div class="col-5 col-lg-3 mb-2">
              <div class="input-group">
                <label class="input-group-text" for="5">在校状态</label>
                <input type="text" readonly value="在校" class="form-control" id="5" />
              </div>
            </div>
            <div class="col-5 col-lg-3 mb-2">
              <div class="input-group">
                <label class="input-group-text" for="5">专修专业</label>
                <input type="text" readonly value="软件工程" class="form-control" id="5" />
              </div>
            </div>
            <div class="col-5 col-lg-3 mb-2">
              <div class="input-group">
                <label class="input-group-text" for="5">专修年级</label>
                <input type="text" readonly value="21级" class="form-control" id="5" />
              </div>
            </div>
            <div class="col-5 col-lg-3 mb-2">
              <div class="input-group">
                <label class="input-group-text" for="5">专修季节</label>
                <input type="text" readonly value="秋" class="form-control" id="5" />
              </div>
            </div>
            <div class="col-12 col-lg-6">
              <div class="input-group">
                <label class="input-group-text" for="3">身份证号</label>
                <input type="text" readonly value="510623200012369855" class="form-control" id="3" />
              </div>
            </div>
          </div>
        </div>
        <!-- 尾部 -->
        <div class="modal-footer">
          <button type="button" class="btn btn-primary" data-bs-dismiss="modal">
            确认
          </button>
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
            取消
          </button>
        </div>
      </div>
    </div>
  </div>

  <!-- 点击异动弹出模态框 -->
  <div class="modal fade" id="removeModal" data-bs-backdrop="static" data-keyboard="false" tabindex="-1"
    aria-labelledby="changeMajorModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h1 class="modal-title fs-5" id="showModal">异动信息</h1>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <!-- 表格 -->
          <table class="table">
            <thead>
              <tr>
                <th>操作人</th>
                <th>最新一次操作类别</th>
                <th>描述</th>
                <th>修改日期</th>
              </tr>
            </thead>
            <tbody>
              <!-- 表格内容 -->
              <tr>
                <td>adim</td>
                <td>更改</td>
                <td>更改</td>
                <td>2024/4/14</td>
              </tr>
              <!-- 这里可以添加更多学生信息的行 -->
            </tbody>
          </table>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-primary" data-bs-dismiss="modal">
            确认
          </button>
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
            取消
          </button>
        </div>
      </div>
    </div>
  </div>

  <script type="text/javascript" src="../js/jquery.min.js"></script>
  <script type="text/javascript" src="../js/popper.min.js"></script>
  <script type="text/javascript" src="../js/bootstrap.min.js"></script>
  <script type="text/javascript" src="../js/main.min.js"></script>
  <script src="../js/vue.js"></script>
  <script>
    new Vue({
      el: '#app',
      data: {
        // 查询栏状态
        unfold: false,
        // 模糊查询选项按钮
        fuzzy: false,
        queryValue: '',
        selectedFieldValue: '0', // 给定值作为默认项
        aryField: ['专修编号', '证件号', '学生姓名'], // 字段名是固定数据
        studentArr: [
          {
            isChecked: true,
            id: 1,
            majorNumber: '2135D101',
            name: '小明',
            sex: '男',
            idNumber: 512356987454345,
            arrangement: '高起本',
            atSchoolType: '在校',
            major: '软件工程',
            educatCombination: '国开专科+网教本科',
            unusualAction: '有',
          },
        ],
      },
      computed: {
        unfoldOrfold () {
          return this.unfold ? '展开' : '收起';
        },
        isAll: {
          get () {
            return this.studentArr.every((item) => item.isChecked);
          },
          set (value) {
            // 基于拿到的布尔值，要让所有的小选框 同步状态
            this.studentArr.forEach((item) => (item.isChecked = value));
          },
        },
      },
      methods: {
        toggle () {
          this.unfold = !this.unfold;
        },
      },
      mounted () {
        let a = this.studentArr[0];
        this.studentArr.splice(0, 0, a, a, a, a, a, a, a, a, a, a, a);
        console.log(this.studentArr);
      },
    });
  </script>
</body>

</html>